<template>
  <!-- 科技申报，完成审批详情弹框 -->
  <a-modal
    :footer="null"
    :title="title"
    :closable="true"
    :visible.sync="dialogVisible"
    width="1200px"
    @cancel="handleClose"
  >
    <!-- 审批类型 -->
    <a-tabs v-model="auditType" @change="handleChange">
      <a-tab-pane v-if="form.declareId" :key="1" tab="申报流程" />
      <a-tab-pane v-if="form.completeId" :key="2" tab="完成流程" />
    </a-tabs>
    <a-tabs v-model="key" type="card" class="mb20">
      <a-tab-pane :key="1" tab="当前流程">
        <a-spin :spinning="spinning">
          <img style="width: 100%" :src="flowChart">
        </a-spin>
        <s-table
          ref="ApprovetableCurrent"
          bordered
          size="default"
          row-key="key"
          :columns="columnApproveCurrent"
          :data="loadDataCurrent"
          :alert="true"
          show-size-changer
          show-quick-jumper
          :show-pagination="false"
        >
          <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
          <template slot="userName" slot-scope="text">
            <ellipsis :length="50" tooltip placement="right">{{ text }}</ellipsis>
          </template>
        </s-table>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="历史流程">
        <s-table
          ref="Approvetable"
          bordered
          size="default"
          row-key="key"
          :columns="columnApprove"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          :show-pagination="true"
          @expand="expand"
        >
          <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
          <a-spin slot="expandedRowRender" slot-scope="record" :spinning="record.spinning" style="margin: 0">
            <a-table bordered row-key="id" :columns="columnApproveDetail" :data-source="record.description"
                     :pagination="false"
            />
          </a-spin>
        </s-table>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import { getProcessNodeList, getProcInstByBusiness, completeTask, getCurrentProcess, getFlowChart } from '@/api/process'
import { getOrgEmployeesListBy, getProcessGroupPerson } from '@/api/commons'
import { STable } from '@/components'
import { Ellipsis } from '@/components'
import JosnBig from 'json-bigint'
import { getCurrentProcessList } from '@/utils/requestWithParams.js'

export default {
  name: 'a' + Date.now(),
  components: {
    STable,
    Ellipsis
  },
  props: {
    title: {
      type: String,
      default: () => '审批详情'
    },
    visible: {
      type: Boolean,
      default: () => false
    },
    // 参数
    form: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      columnApprove: [
        {
          title: '序号',
          dataIndex: 'serial',
          width: 80,
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '节点名称',
          dataIndex: 'name'
        },
        {
          title: '发起人',
          dataIndex: 'userName'
        },
        {
          title: '发起时间',
          dataIndex: 'startTime'
        },
        {
          title: '滞留时间',
          dataIndex: 'durationTime'
        },
        {
          title: '结束时间',
          dataIndex: 'endTime'
        }
      ],
      columnApproveCurrent: [
        {
          title: '序号',
          dataIndex: 'serial',
          width: 80,
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '节点名称',
          dataIndex: 'taskName'
        },
        {
          title: '处理人',
          dataIndex: 'userName',
          scopedSlots: { customRender: 'userName' }
        },
        {
          title: '处理结果',
          dataIndex: 'processStatusName'
        },
        {
          title: '审批意见',
          dataIndex: 'opinions',
          ellipsis: true
        },
        {
          title: '开始时间',
          dataIndex: 'createTime'
        },
        {
          title: '滞留时间',
          dataIndex: 'durationInMillis'
        },
        {
          title: '结束时间',
          dataIndex: 'endTime'
        }
      ],
      columnApproveDetail: [
        {
          title: '审批人',
          dataIndex: 'userName'
        },
        {
          title: '审批时间',
          dataIndex: 'createTime'
        },
        {
          title: '节点名称',
          dataIndex: 'taskName'
        },
        {
          title: '滞留时间',
          dataIndex: 'durationInMillis'
        },
        {
          title: '审批意见',
          dataIndex: 'formData.opinions',
          ellipsis: true
        }
      ],
      approveInfos: [],
      spinning: false,
      key: 1,
      auditType: 1, // 审批类型
      flowChart: '',
      loadDataCurrent: () => {
        console.log('auditType', this.auditType)
        console.log(this.businessId)
        return getCurrentProcessList.call(this, { businessId: this.businessId })
      },
      loadData: (parameter) => {
        parameter.businessId = this.businessId
        return getProcInstByBusiness(parameter).then((res) => {
          const data = res.data
          const userIds = []
          data.forEach((item) => {
            item.spinning = false
            userIds.push(item.startUser)
            item.endTime = item.endTime || '进行中'
            item.durationTime = item.durationTime || '进行中'
            item.description = []
          })
          return getOrgEmployeesListBy({ userIds, delete: true }).then((employees) => {
            this.flowRequesting = false
            res.data.forEach((r) => {
              employees.data.some((e) => {
                if (e.userId === r.startUser) {
                  r.userName = e.name
                  return true
                }
              })
            })
            // console.log('数据返回对象：', res)
            return res
          })
        })
      }
    }
  },
  methods: {
    handleChange() {
      this.getFlowChart()
      this.$refs.Approvetable?.refresh()
      this.$refs.ApprovetableCurrent?.refresh()
    },
    handleClose() {
      this.dialogVisible = false
    },
    getFlowChart() {
      this.spinning = true
      getFlowChart(this.businessId)
        .then((res) => {
          this.spinning = false
          if (res.code === 200) {
            this.flowChart = 'data:image/png;base64,' + res.data
          }
        })
        .catch(() => {
          this.flowChart = ''
          this.spinning = false
        })
    },
    expand(expanded, record) {
      console.log(expanded, record)
      if (expanded) {
        this.getProcessNodes(record.procInstId, record)
      }
    },
    getProcessNodes(e, record) {
      //   console.log(record)
      record.spinning = true
      getProcessNodeList({ procInstId: e, pageNo: 1, pageSize: 100 })
        .then((res) => {
          if (res.code === 200) {
            const data = res.data
            const userIds = data.map((d) => {
              if (d.formData) {
                d.formData = JosnBig.parse(d.formData)
              }
              return d.assignee
            })
            getOrgEmployeesListBy({ userIds, delete: true })
              .then((employees) => {
                record.spinning = false
                res.data.forEach((r) => {
                  employees.data.some((e) => {
                    if (e.userId === r.assignee) {
                      r.userName = e.name
                      return true
                    }
                  })
                })
                console.log(res.data)
                this.$refs.Approvetable.localDataSource.forEach((i) => {
                  if (i.procInstId == e) {
                    console.log(res.data)
                    i.description = res.data
                    // this.$set(i, 'description', res.data)
                  }
                })
                // console.log(this.$refs.Approvetable.localDataSource)
              })
              .catch(() => {
                record.spinning = false
              })
          }
        })
        .catch(() => {
          record.spinning = false
        })
    }
  },
  computed: {
    // 业务id
    businessId() {
      let form = this.form
      return [form.declareId, form.completeId][this.auditType - 1]
    },
    // 与父组件绑定visible
    dialogVisible: {
      get: function() {
        return this.visible
      },
      set: function(e) {
        this.$emit('update:visible', e)
      }
    }
  },
  watch: {
    visible(v) {
      if (v) {
        let form = this.form
        if (form.completeId) {
          this.auditType = 2
        } else if (form.declareId) {
          this.auditType = 1
        }
        this.key = 1
        this.getFlowChart()
        this.$refs.Approvetable?.refresh()
        this.$refs.ApprovetableCurrent?.refresh()
      } else {
        this.flowChart = ''
        if (this.$refs.Approvetable) {
          this.$refs.Approvetable.localDataSource = []
        }
        if (this.$refs.ApprovetableCurrent) {
          this.$refs.ApprovetableCurrent.localDataSource = []
        }
      }
    }
  }
}
</script>

